<template>
    <div>
        <header>—— EXPERIENCE ——</header>
        <div class="content-box" v-for="(item,index) in  listData" :key="index">
            <p class="circle"></p>
            <div class="content-item" :style="index === listData.length - 1?'border:0':''">
                <div>
                    <h1>{{item.name}}</h1>
                    <p>({{item.date}})</p>
                </div>
                <div>
                    <h1>职位：{{item.workName}}</h1>
                    <p v-for="(p,index) in item.workList" :key="index">{{p}}</p>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            listData: [
                {
                    name:"重庆慧都科技有限公司",
                    date:"2020.11--2020.12",
                    workName:"JAVA后端开发",
                    workList:[
                        "工作项目：十三五空基站（前端项目",
                        "主要工作：为前端提供后端接口,为前端页面的渲染提供数据支持。"
                    ]
                },
                {
                    name:"重庆帮考教育科技有限公司",
                    date:"2021.3--2021.8",
                    workName:"H5前端开发",
                    workList:[
                        "工作项目：亿题库、帮考网校、卓越商学院。",
                        "主要工作：根据产品需求，实现页面的布局，联调后端接口",
                    ]
                },
                {
                    name:"苏州益发特科技有限公司",
                    date:"2021.9--2022.?",
                    workName:"Web前端开发",
                    workList:[
                        "工作地：创新奇智（重庆）科技有限公司",
                        "工作项目：Program Spaces、Q-plant（PC）、Q-plant（PAD）",
                        "使用框架：Vue、Uniapp",
                        "主要工作：根据产品需求，实现页面的布局，联调后端接口"                     
                    ]
                }
            ]
        }
    }
}
</script>
<style scoped>
header{
    margin: 0.5rem 0;
    font-size: 0.5rem;
}
.circle{
    width: 0.3rem;
    height: 0.3rem;
    border-radius: 50%;
    background-color: crimson;
    z-index: 99;
}
.content-box{
    display: flex;
    width: 90%;
    margin: 0 auto;
    text-align: left;
}
.content-item{
    width: 100%;
    border-left: 0.01rem solid black;
    margin-left: -0.15rem;
    padding-left: 0.15rem;
    padding-bottom: 0.4rem;
    display: flex;
    justify-content: space-between;
}
.content-item>div:first-child{
    width: 30%;
}
.content-item>div:last-child{
    width: 65%;
    padding-right: calc(0.6rem - 5%);
}
.content-item>div>h1{
    font-size: 0.28rem;
}
.content-item>div>p{
    font-size: 0.18rem;
    padding-bottom: 0.1rem;
}
</style>